<template>
  <el-scrollbar style="min-height: 60px;" wrap-style="overflow-x: hidden;" :native="false">
  <div class="manage_page fillcontain">
  
    <el-row style="height: 10%;">
      <el-col :span="24"  style="min-height: 100%; background-color: #545c64">
        <el-menu :default-active="defaultActive" mode="horizontal" style="min-height: 90%;" class="el-menu-horizontal-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
          <template>
            <img src="../assets/1.jpg" class="avator">
          </template>
          <el-menu-item index="/Home" ><i class="zhao-icon-third-icon_work_fill"></i> &nbsp; 主页</el-menu-item>
          <el-menu-item index="/show" >考研新闻</el-menu-item>
	  <el-menu-item index="/collect" >收藏夹</el-menu-item>
<!--      <el-menu-item index="/testpage" >testpage</el-menu-item>-->
        </el-menu>
	
      </el-col>
    </el-row>
    
    <el-row style="height: 100%;">
      <el-col :span="24" style="height: 100%;overflow: auto;">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </el-col>
    </el-row>
  </div>
  </el-scrollbar>
</template>

<script>
  
  export default {
    name:"SideBar",
    computed: {
      defaultActive(){
       //初始化时,导航显示首页
       if(this.$route.path=='/'){
       	 this.$router.push('/show')
         return '/show'
       }else{
         //非导航跳转页面时,导航栏选中相应选项
         return this.$route.path
       }      
     }
    },
    methods:{
      data() {
        return {
          disabled: false
        }
      }
    },
    created(){
    }
  }
</script>


<style lang="less" scoped>
  @import '../style/mixin';

  .avator{
    .wh(36px, 36px);
    border-radius: 50%;
    float: right;
    margin: 10px;
  }

</style>
